<template>
	<view class="camera-view">
		<uniNavBar @clickLeft="clickLeft" color="#fff" :border="false" :statusBar="true" :fixed="true" leftIcon="back"
			backgroundColor="hsla(0, 0%, 80%, 0)"></uniNavBar>
		<!-- 相机 -->
		<view :style="{ top: `calc(${margintop + 'px'})` }" class="camera-block" v-if="showCamera && timeout">
			<camera :style="{ display: !imgPath && !videoPath ? 'flex' : 'none' }" :device-position="device"
				:flash="flash" class="camera" resolution="high" ref="camera">
			</camera>

			<!-- 缩放控制条 -->
			<view class="zoom-control" v-if="!imgPath && !videoPath">
				<slider class="zoom-slider" :value="zoomLevel" @changing="onZoomChanging" @change="onZoomChange" min="1"
					max="5" step="0.1" block-size="15" activeColor="#ffffff" backgroundColor="#ccc"
					block-color="#ffffff" />
				<view class="zoom-txt">
					x{{ (zoomLevel || 0).toFixed(1) }}
				</view>
			</view>
			<!-- 拍照图片预览 -->
			<image class="preview" @click="imgPath = ''" v-if="imgPath" :src="imgPath">
			</image>
			<!-- 拍照图片预览 end -->

			<!-- 视频预览 -->
			<video class="preview" v-if="videoPath" :src="videoPath" :controls="true" :show-center-play-btn="true"
				:enable-progress-gesture="true" :show-progress="true" :show-background-playback-button="false"
				:autoplay="false">
			</video>
			<!-- 视频预览 end -->

			<!-- 水印信息 -->
			<view v-if="showCamera && camearInfo.time && cameraType == 1" class="img-msg">
				<!-- ai合规情况结论 S -->
				<view :class="['ai-result', modelTag.color]" @click.stop="toAppeal" v-if="modelResult && modelResult.result != undefined">
					<image class="ai-result-ico" src="@/static/images/ai.svg"></image>
					<text>
						{{ modelTag.name }}
					</text>
					<view class="appeal"
						v-if="(modelResult.business_result == undefined && modelResult.result == 2) || modelResult.business_result == 2">
						申诉
					</view>
				</view>
				<!-- ai合规情况结论 E -->

				<!-- ai选中问题 S -->
				<view :class="'reason-tips'" v-if="reason.businessReason">
					<text
						:class="['reason-tips-tag', reason.determine == 2 ? 'red' : (reason.determine == 0 ? 'gre' : 'org')]">
						{{ reason.businessReason }}
					</text>
				</view>
				<!-- ai选中问题 E -->
				<!-- ai结果框绘制 E -->
				<view class="overlay" v-if="overlay.length" :style="{ width: imgW, height: imgH }">
					<view v-for="(it, idx) in overlay" :key="idx" class="box"
						:style="{ left: it.x + 'px', top: it.y + 'px', width: it.width + 'px', height: it.height + 'px', borderColor: ['#2FFF00', '#FF7505', '#E02020'][it.determine], opacity: highlightBox == it.key ? '1' : '0.9', borderWidth: highlightBox == it.key ? '2px' : '1px' }">
					</view>
				</view>
				<!-- ai结果框绘制 S -->
				<!-- 不合规原因 S -->
				<view class="reasons" v-if="nonCompliant && nonCompliant.length">
					<view class="reasons-tab" @click.stop="changeShowNonList()">
						<image :style="{ transform: showNonList ? 'rotate(0deg)' : 'rotate(180deg)' }" class="ico"
							src="@/static/images/down_white.png"></image> 不合规项({{
								nonCompliant.length }})
					</view>
					<view class="reasons-list" v-if="showNonList">
						<view :class="['reasons-item', highlightBox == it.key ? 'notpas-act' : '']"
							v-for="(it, idx) in nonCompliant" :key="idx" @click.stop="chooseErrorBox(it)">
							<text class="reasons-item-tag">
								不合规
							</text> {{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
							}}
						</view>
					</view>

				</view>
				<!-- 不合规原因 E -->
				<!-- 疑似合规原因 S -->
				<view class="reasons" v-if="posCompliant && posCompliant.length">
					<view class="reasons-tab pos-tab" @click.stop="changeShowPosList()">
						<image :style="{ transform: showPosList ? 'rotate(0deg)' : 'rotate(180deg)' }" class="ico"
							src="@/static/images/down_white.png"></image>
						疑似合规项({{ posCompliant.length }})
					</view>
					<view class="reasons-list" v-if="showPosList">
						<view :class="['reasons-item', highlightBox == it.key ? 'pos-act' : '']"
							v-for="(it, idx) in posCompliant" :key="idx" @click.stop="chooseErrorBox(it)">
							<text class="reasons-item-tag pos-tag">
								疑似合规
							</text> {{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
							}}
						</view>
					</view>

				</view>
				<!-- 疑似合规原因 E -->

				<!-- 合规项 S -->
				<view class="reasons" v-if="passList && passList.length">
					<view class="reasons-tab pas-tab" @click.stop="changeShowPassList()">
						<image :style="{ transform: showPassList ? 'rotate(0deg)' : 'rotate(180deg)' }" class="ico"
							src="@/static/images/down_white.png"></image>
						合规项({{ passList.length }})
					</view>
					<view class="reasons-list" v-if="showPassList">
						<view :class="['reasons-item', highlightBox == it.key ? 'pas-act' : '']"
							v-for="(it, idx) in passList" :key="idx" @click.stop="chooseErrorBox(it)">
							<text class="reasons-item-tag pas-tag">
								合规
							</text> {{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
							}}
						</view>
					</view>

				</view>
				<!-- 合规项 E -->

				<view v-if="camearInfo" class="watermark">
					<view class="img-msg-item aligncenter">
						<view class="times">
							{{ camearInfo.time || '' }}
						</view>
						<view>
							<view class="dates">
								{{ camearInfo.week || '' }}
							</view>
							<view class="dates">
								{{ camearInfo.day || '' }}
							</view>

						</view>

					</view>

					<view class="img-msg-line">
					</view>
					<view class="img-msg-item" v-if="camearInfo.buildingName">
						<view class="imi-label">项目：</view>
						<view class="imi-content"> {{ camearInfo.buildingName || '' }}</view>
					</view>
					<view class="img-msg-item" v-if="camearInfo.elevatorName">
						<view class="imi-label">梯号：</view>
						<view class="imi-content">{{ camearInfo.elevatorName || '' }}</view>
					</view>
					<view class="img-msg-item" v-if="camearInfo.address">
						<view class="imi-label">定位：</view>
						<view class="imi-content">{{ camearInfo.address || '' }}</view>
					</view>
					<image class="watermark-logo" mode="widthFix"
						src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/e8RBYQDDWsmWd150ea3f6a6d1e0291738b8a1bdf4557.png">
					</image>
					<view class="watermark-id" v-if="imgPath">
						照片ID:{{ imgId }}
					</view>
				</view>

			</view>
			<!-- 水印信息end -->
		</view>
		<!-- 相机end -->

		<!-- 加载占位 -->
		<view class="defalut-view" v-else :style="{ top: margintop + 'px' }">
			<image class="img" src="@/static/images/loading.png" mode=""></image>
			<view>{{ tips }}</view>
		</view>
		<!-- 加载占位end -->

		<!-- 底部按钮组 -->
		<view class="buttons" v-if="(!imgPath && !videoPath) && showCamera && timeout">
			<image v-if="flash == 'off'" @click="changeFlash('torch')" class="c_model"
				src="@/static/images/camera/flash_off.svg"></image>
			<image v-else @click="changeFlash('off')" class="c_model" src="@/static/images/camera/flash_on.svg"></image>

			<view class="record-timer" v-if="isRecording">{{ recordDuration }}s</view>

			<!-- 模式切换按钮 -->
			<view class="mode-switch" v-if="justPhoto">
				<view :class="['mode-btn', cameraType === 1 ? 'active' : '']" @click="switchMode(1)">拍照</view>
				<view :class="['mode-btn', cameraType === 2 ? 'active' : '']" @click="switchMode(2)">视频</view>
			</view>

			<!-- 拍照按钮 -->
			<view v-if="cameraType === 1" @click="takePhoto" class="take photo"></view>

			<!-- 录制按钮 -->
			<view v-else @click="toggleRecording" class="take video" :class="{ 'recording': isRecording }"></view>

			<image @click="changeDevice" class="c_model" src="@/static/images/camera/change.svg"></image>
		</view>
		<view class="preview-btns" v-if="(imgPath || videoPath) && useNow == 1">
			<view class="preview-btns-item" @click="reTake">重拍</view>
			<view class="preview-btns-item" @click="submit" v-if="!justPhoto">使用{{ cameraType === 1 ? '照片' : '视频' }}
			</view>
			<view class="preview-btns-item" @click="saveMedia" v-else>保存{{ cameraType === 1 ? '照片' : '视频' }}</view>
		</view>
		<!-- 底部按钮组 end -->

		<canvas class="save-canvas" canvas-id="save-canvas">
		</canvas>

		<span style="position: absolute;top: 10%;right:10rpx;font-size: 24rpx;color: #ccc;">version:{{ version || '-'
		}}</span>

		<div style="position: absolute;top: 15%;right:10rpx;font-size: 24rpx;color: #ccc;">
			<div v-for="(item, index) in modelTips" :key="index">{{ item }}</div>
		</div>
		<!-- 模型canvas -->
		<canvas class="mycanvas" canvas-id="ai-canvas" :style="{ width: '640px', height: '640px' }">
		</canvas>
		<canvas canvas-id="resCanvas"
			:style="{ width: resCanvas.width + 'px', height: resCanvas.height + 'px', position: 'absolute', left: '-' + resCanvas.width + 'px', top: '-' + resCanvas.height + 'px' }"></canvas>
		<image :src="resUrl" mode="widthFix" style="width: 100%;height: auto;">

		</image>

		<previewMedia ref="previewMedia" @closed="previewClosed"></previewMedia>

		<model title="AI结果申诉" :showBottom="false" @close="aiResultModel = false" :visible="aiResultModel">
			<view class="model-txt">
				AI检测到该图片存在<text style="color:#e02020">不合规</text>风险。
			</view>
			<view class="model-txt">
				若对检测结果有异议，可在工单
			</view>
			<view class="model-txt">
				<text style="font-weight: bold;">提交任务</text>后，进行结果申诉。
			</view>
			<view class="model-close" @click="aiResultModel = false">
				我知道了
			</view>
		</model>
	</view>
</template>
<script>
import model from '@/components/model/index.vue';
import sidaAI from '@/utils/ai';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import dayjs from 'dayjs';
import { getlocalinfo } from '@/utils/utils.js';
import { mapState } from 'vuex';
import { setPath } from '@/utils/watermarkTool.js';

// eslint-disable-next-line id-match
import { MODEL_ID_MAP } from '@/utils/constants.js';
export default {
	components: { uniNavBar, model },
	props: {
		pageType: {
			type: [Number, String],
			// 1页面模式  2组件模式
			default: 1
		}
	},
	data() {
		return {
			config: {},
			aiResultModel: false,
			resUrl: '',
			resCanvas: {
				width: '',
				height: ''
			},
			modelTips: [],
			ctx: null,
			// 定时任务（定时抽帧识别
			interval: null,
			// 模型实例
			session: null,
			downloading: false,
			orgPath: '',
			margintop: '',
			version: '',
			cameraType: 1,// 1拍照 2视频录制
			// 仅拍照
			justPhoto: false,
			// imgType 1保养记录 2保养签到 3保养签退 4维修记录 5维修签到 6维修签退 7配件记录 8配件配件签到 9配件签退
			imgType: '',
			imgAddress: '',
			imgInfo: {
				buildingId: '',
				buildingName: '',
				elevatorId: '',
				elevatorAddress: '',
				planId: '',
				planWorkItemId: '',
				partsId: '',
			},
			// 图片id
			imgId: '',
			imgTime: '',
			buildingId: '',
			elevatorId: '',
			reFile: '',
			tips: '正在验证相机...',
			timeout: false,
			showCamera: false,
			// off 关 on 开
			flash: 'off',
			// back后置 front前置
			device: 'back',
			// 图片路径
			imgPath: '',
			// 1为显示重新拍照,0为直接拍照
			useNow: 1,
			canvasWidth: '',
			canvasHeight: '',
			orientation: 1,
			canvasimg: '',
			resodm: {},
			dayjs: dayjs,
			// 实际当前定位的经纬度
			localInfo: {},
			buildingName: '',
			elevatorName: '',
			dayMap: [
				'星期日',
				'星期一',
				'星期二',
				'星期三',
				'星期四',
				'星期五',
				'星期六',
			],
			watermarkInfo: {},

			// 选中的框
			highlightBox: '',
			reason: {
				businessReason: '',
				detailedReason: ''
			},
			appeal: false,
			overlay: [],
			imgW: '',
			imgH: '',
			modelResult: null,
			// 不合规原因列表
			showNonList: true,
			nonCompliant: [],
			// 疑似合规原因列表
			showPosList: true,
			posCompliant: [],

			// 合规项列表
			showPassList: true,
			passList: [],
			camearInfo: {},
			// 模型 modelType 1签到模型，2签退模型 3底坑 空不使用模型 
			modelType: '',
			modelMap: {
				1: 'SignIn',
				2: 'SignOut',
				3: 'pitAreaCleaning'
			},
			// 判断当前小程序环境 ios/android
			platform: uni.getSystemInfoSync().platform,
			resultColors: {
				'-1': 'red',
				'0': 'gre',
				'1': 'org',
				'2': 'red'
			},
			resultTxts: {
				'-1': '无法识别',
				'0': '合规',
				'1': '疑似合规',
				'2': '不合规'
			},
			modelTag: {},
			// 非年审1  年审2
			auditType: 2,
			isRecording: false,
			recordContext: null,
			recordTimer: null,
			recordDuration: 0,
			// 最大录制时长(秒)
			maxDuration: 120,
			videoPath: '', // 视频预览路径
			zoomLevel: 1, // 相机缩放级别
			cameraContext: null, // 相机上下文
			zoomTimer: false
		};
	},
	computed: {
		// 离线状态 ture 在线
		...mapState('system', ['onlineStatus']),
		...mapState('user', ['userinfo']),
		offLine() {
			return !this.onlineStatus;
		},

	},
	watch: {

	},
	onLoad(e) {
		this.init(e);
	},
	onShow() {
		this.setStatus();
	},
	created() {
		// this.init({}) 
		// this.setStatus()
	},

	onUnload() {
		// uni.$off('uploadImg') 
		uni.stopDeviceMotionListening({});
		uni.offDeviceMotionChange();
	},
	mounted() {
		setTimeout(() => {
			this.timeout = true;
		}, 1000);
		this.imgW = uni.upx2px(750) + 'px';
		this.imgH = uni.upx2px(960) + 'px';
		this.initCameraContext();
	},
	methods: {
		// 申诉提醒
		toAppeal() {
			if ((this.modelResult.business_result == undefined && this.modelResult.result == 2) || this.modelResult.business_result == 2) {
				this.aiResultModel = true;
			}
		},
		setModelTag() {
			if (!this.modelResult) {
				this.modelTag = {};
				return {};
			}
			if (this.modelResult.result == undefined) {
				this.modelTag = {};
				return {};
			} else {
				if (this.modelResult.business_result == undefined) {
					this.modelTag = {
						color: this.resultColors[String(this.modelResult.result)] || '',
						name: this.resultTxts[String(this.modelResult.result)] || '',
					};
				} else {
					this.modelTag = {
						color: this.resultColors[String(this.modelResult.business_result)] || '',
						name: this.resultTxts[String(this.modelResult.business_result)] || '',
					};
				}
			}
		},

		previewClosed() {

		},
		setStatus() {
			if (this.showCamera) {
				return;
			}
			if (this.onlineStatus) {
				this.getCameraAuthInfo();
			} else {
				this.showCamera = true;
			}
		},

		init(e) {
			console.log('camera-init', e);
			if (e.useNow) {
				this.useNow = 0;
			}

			if (e.imgId) {
				this.imgId = e.imgId;
			}
			if (e.modelType) {
				this.modelType = e.modelType;
				// 需要跑模型 开启确认模式
				this.useNow = 1;
			}
			if (e.cameraType) {
				this.cameraType = e.cameraType;
			}

			this.auditType = e.auditType || 2;
			this.modelResult = null;
			this.imgType = e.imgType;
			this.justPhoto = e.justPhoto || false;

			if (this.imgType == 2 || this.imgType == 3) {
				// 保养签到签退需要跑模型 开启确认模式
				this.modelType = (this.imgType == 2 ? 1 : 2);
				this.useNow = 1;
			}

			if (this.imgType == 5 || this.imgType == 6) {
				// 维修签到签退需要跑模型 开启确认模式
				this.modelType = (this.imgType == 5 ? 1 : 2);
				this.useNow = 1;
			}

			let systeminfo = uni.getSystemInfoSync();
			this.margintop = systeminfo.screenTop > 0 ? (systeminfo.screenTop - systeminfo.statusBarHeight) : systeminfo.statusBarHeight;

			uni.getStorage({
				key: 'offline_config',
				success: (res) => {
					this.config = res.data;
				},
				complete: () => {
					if (this.imgType == 5) {
						// console.log('complete',JSON.stringify(this.config.ai_business_config));
						// 维修签到额外逻辑
						if (!this.config.ai_business_config || (!this.config.ai_business_config.fenceDetermine && !this.config.ai_business_config.footDetermine && !this.config.ai_business_config.headDetermine)) {
							// 没有维修ai设置或全都没勾选  关闭模型
							this.modelType = '';
						}
					}

					if (this.imgType == 6) {
						// 维修签退额外逻辑 
						if (!this.config.ai_business_config || (!this.config.ai_business_config.threeOnOneDeter)) {
							// 没有维修ai设置或全都没勾选   关闭模型
							this.modelType = '';
						}
					}
				},
			});
			// 获取水印缓存
			uni.getStorage({
				key: 'waterMarkMsg',
				success: async (res) => {
					console.log('水印缓存', res);
					if (!this.justPhoto && this.imgType) {
						this.imgInfo = res.data;
						this.buildingName = res.data.buildingName;
						this.elevatorName = res.data.elevatorAddress;
					}

					this.getPhotoMsg();
				},
				fail: () => {
					this.getPhotoMsg();
				},
			});

			try {
				const accountInfo = uni.getAccountInfoSync();
				console.log(accountInfo.miniProgram);
				this.version = accountInfo.miniProgram.version || accountInfo.miniProgram.envVersion;
			} catch (error) {
				console.log('获取版本号失败');
			}
		},
		changeFlash(type) {
			this.flash = type;
		},
		changeDevice() {
			this.device = this.device == 'back' ? 'front' : 'back';
		},
		clickLeft() {
			this.backFuc();
		},
		backFuc() {
			// #ifdef MP-WEIXIN
			if (this.pageType == 2) {
				this.$emit('back');
				return;
			}
			// #endif 
			uni.navigateBack({});
		},
		takePhoto() {
			let ctx = uni.createCameraContext();
			uni.showLoading({
				title: '保存中..',
			});
			ctx.takePhoto({
				// high normal low
				quality: 'high',
				success: async (res) => {
					this.setPhoto(res);
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					});
				},
			});
		},
		chooseImage() {
			return new Promise((resolve) => {
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						let path = res.tempFilePaths[0];

						resolve(path);
					},
					fail: err => {
						resolve('');
					}
				});
			});
		},
		async setPhoto(res) {
			console.log('setPhoto', res);

			// let path = await this.chooseImage();
			let path = res.tempImagePath;
			// 原图 
			this.orgPath = path;
			this.imgPath = path;
			this.reFile = this.imgPath;
			console.log('setPhoto -end');

			// this.imgType = 3; 在线 aiSwitch=1 才开启模型
			if (this.userinfo.aiSwitch == 1 && this.modelType && this.onlineStatus && (this.modelType != 2 || this.auditType != 1)) {
				// modelType 1签到模型，2签退模型 3清洁 
				uni.showLoading({
					title: '图片识别中',
					mask: true,
				});

				// 进行推理

				const result = await sidaAI.inferImageMultiModel(this.modelType, path);
				console.log('业务结果：', JSON.stringify(result));

				// 获取模型结果
				this.getModelResult(result.results);

				if (this.useNow == 0) {
					setTimeout(() => {
						uni.hideLoading();
						this.submit();
					}, 500);
				} else {
					uni.hideLoading();
				}
				uni.hideLoading();
				return;
			} else {
				// 离线
				let imgInfo = await this.getImgHead();
				let imgwh = await this.getImageInfo(this.imgPath);
				imgInfo.width = imgwh.width;
				imgInfo.height = imgwh.height;
				imgInfo.watermark = JSON.stringify(this.watermarkInfo);
				imgInfo.img_from = this.modelType;
				imgInfo.planId = this.planId;
				await this.setImageInfo(this.imgId, imgInfo);
				setPath(this.imgPath, this.imgId);
				// console.log('img-离线', imgInfo);
				if (this.useNow == 0) {
					setTimeout(() => {
						uni.hideLoading();
						this.submit();
					}, 1000);
				} else {
					uni.hideLoading();
				}
			}
		},
		reTake() {
			this.orgPath = '';
			this.imgPath = '';
			this.videoPath = '';
			this.modelTips = [];
			this.modelResult = null;
			this.nonCompliant = [];
			this.posCompliant = [];
			this.passList = [];
			this.overlay = [];
			
			this.highlightBox = '';
			this.reason = {
				businessReason: '',
				detailedReason: ''
			};
		},

		async getModelResult(res) {
			console.log('getModelResult', res);
			// determine  -1: 无法识别   0："合规"  1："存疑"(异常| 疑似合规)  2："不合规" (异常)
			let determine = res.determine;

			this.highlightBox = '';
			this.reason = {
				businessReason: '',
				detailedReason: ''
			};
			this.modelTag = {};
			this.nonCompliant = [];
			this.posCompliant = [];
			this.passList = [];
			this.overlay = [];
			try {
				this.modelResult = res;
				if (!res || Object.keys(res).length == 0) {
					determine = -1;
					uni.hideLoading();
					uni.showToast({
						title: 'ai识别失败',
						icon: 'error'
					});
					return;
				}
			} catch (error) {
				console.log(error);
				uni.hideLoading();
				return;
			}

			try {
				let imgInfo = await this.getImgHead();
				let imgwh = await this.getImageInfo(this.imgPath);
				imgInfo.width = imgwh.width;
				imgInfo.height = imgwh.height;
				imgInfo.watermark = JSON.stringify(this.watermarkInfo);
				imgInfo.img_from = this.modelType;
				imgInfo.planId = this.planId;
				let modelId = MODEL_ID_MAP[this.modelType];
				if (this.modelResult) {
					imgInfo.model_id = modelId;
					// 不合规
					let nonCompliant = [];
					// 疑似合规
					let posCompliant = [];
					let passList = [];
					let overlay = [];
					let resultObj = this.$refs.previewMedia.getResultObj({
						width: imgInfo.width,
						height: imgInfo.height,
						modelId: imgInfo.model_id, result: this.modelResult
					});
					// determine  -1: 无法识别   0："合规"  1："存疑"(异常| 疑似合规)  2："不合规" (异常)
					let business_result = 0;

					console.log('resultObj', resultObj);

					for (let i = 0; i < resultObj.length; i++) {
						const item = resultObj[i];
						const { determine: itemDetermine, key } = item;

						// 处理不合规情况 (determine == 2)
						if (itemDetermine == 2) {
							nonCompliant.push(item);
							// 维修签到场景下的业务判断
							if ((this.imgType == 5) && this.config.ai_business_config[key]) {
								business_result = 2;
							}
						}

						// 处理疑似合规情况 (determine == 1)
						if (itemDetermine == 1) {
							posCompliant.push(item);
							// 维修签到场景下的业务判断
							if ((this.imgType == 5) && this.config.ai_business_config[key]) {
								business_result = business_result > 1 ? business_result : 1;
							}
						}

						// 处理合规情况 (determine == 0)
						if (itemDetermine !== undefined && itemDetermine !== null && itemDetermine == 0) {
							passList.push(item);
							// 维修签到场景下的业务判断
							if ((this.imgType == 5) && this.config.ai_business_config[key]) {
								business_result = business_result > 1 ? business_result : 1;
							}
						}

						// 添加边界框信息
						const overlaychilds = item.bboxInfo.map(bboxItem => ({
							...bboxItem,
							key: item.key
						}));
						overlay.push(...overlaychilds);
					}

					this.overlay = overlay;
					this.nonCompliant = nonCompliant;
					this.posCompliant = posCompliant;
					this.passList = passList;
					this.modelResult.result = determine;
					imgInfo.result = determine;
					if (this.imgType == 6) {
						business_result = determine;
					}
					if (this.imgType == 5 || this.imgType == 6) {
						this.modelResult.business_result = business_result;
						imgInfo.business_result = business_result;
						imgInfo.ai_business_config = JSON.stringify(this.config.ai_business_config);
					}

					imgInfo.model_result = JSON.stringify(this.modelResult);
					this.setModelTag();
				}
				console.log('setImageInfo', this.imgId, imgInfo);
				await this.setImageInfo(this.imgId, imgInfo);
				setPath(this.imgPath, this.imgId);
				uni.hideLoading();
			} catch (error) {
				console.log('camera-605', error);
			}
		},

		// 处理文字换行
		handleDrawText({ ctx, fontSize, letterSpacing, testText }) {
			console.log('testText', testText);
			// // 微信使用 canvas 2d
			// ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
			// 换行阈值宽度
			const width = uni.upx2px(462);
			const lineHeight = uni.upx2px(10);

			// 多个连续空格只保留一个
			let tempText = testText;
			let textLen = tempText.length;
			ctx.font = `${fontSize}px YaHei`;

			// 如果绘制的文本总宽度并没有超过最大宽度，那么直接绘制
			if (
				ctx.measureText(tempText).width +
				textLen * letterSpacing < width
			) {
				return [testText];
			} else {
				let strArray = [];
				let tempStr = '';
				for (let i = 0; i < textLen; i++) {
					let currStr = tempText[i];
					// 判断当前字符是否是换行符，如果是，那么新增下一行
					let isWrap = !/\r?\n/.test(currStr);
					if (
						isWrap &&
						(
							ctx.measureText(tempStr + currStr).width +
							(tempStr.length + 1) * letterSpacing
						) < width
					) {
						// 如果不是换行符且当前绘制的文本宽度加字距小于最大宽度，直接当前行字符串直接拼接
						tempStr += currStr;
					} else {
						// 否则就是当前行的宽度已经达到极限，进行换行
						strArray.push(tempStr);
						if (isWrap) {
							// 如果不是换行符，直接新的一行开头就是这个字符
							tempStr = currStr;
						} else {
							// 否则，新的一行开头将换行符替换为空字符串
							tempStr = '';
						}
					}
				}
				// 如果还有剩余结尾的字符串，直接就算作一行
				if (tempStr != '') {
					strArray.push(tempStr);
					tempStr = '';
				}

				strArray.forEach((str, index) => {
					// 逐行绘制，绘制的 y 坐标当前行行数加上字体大小加上行高近似的模拟
					// this.handleDrawOneLineText(str, (index + 1) * (fontSize + lineHeight),letterSpacing,ctx);
				});

				return strArray;
				// 微信不使用 canvas 2d
				// ctx.draw();
			}
		},

		handleDrawOneLineText(str, y, letterSpacing, ctx) {
			let tempStr = '';
			for (let i = 0, len = str.length; i < len; i++) {
				// 逐字绘制，每行的y不变，单个字符的x是前面绘制文本的宽度加上每个字符的间距和
				ctx.fillText(
					str[i],
					i * letterSpacing + (ctx.measureText(tempStr).width),
					y
				);
				tempStr += str[i];
			}
		},

		// 获取水印位置列表
		getWaterPositions(ctx) {
			if (!this.camearInfo.time) {
				return [];
			}
			let top = 0;
			const h = uni.upx2px(930);
			// 文字大小
			let timeSize = uni.upx2px(60);
			let dateSize = uni.upx2px(22);
			let infoSize = uni.upx2px(24);
			let idSize = uni.upx2px(20);
			let potions = [];

			// 日期信息
			potions.push({
				x: 10,
				y: '',
				height: 6,
				width: '',
				fontSize: timeSize,
				content: this.camearInfo.time,
				children: [
					{
						x: uni.upx2px(190),
						y: '',
						height: dateSize,
						width: '',
						fontSize: dateSize,
						content: this.camearInfo.week
					},
					{
						x: uni.upx2px(190),
						y: '',
						height: dateSize,
						width: '',
						fontSize: dateSize,
						content: this.camearInfo.day
					}
				]
			});

			potions.push({
				type: 'line',
				height: 14
			});

			// 项目信息
			if (this.camearInfo.buildingName) {
				let buildingNames = this.handleDrawText({
					ctx,
					fontSize: infoSize,
					letterSpacing: 2,
					testText: '项目：' + this.camearInfo.buildingName
				});
				console.log('buildingNames', buildingNames);

				for (let i = 0; i < buildingNames.length; i++) {
					potions.push({
						x: i == 0 ? 10 : uni.upx2px(90),
						y: '',
						height: infoSize,
						width: '',
						fontSize: infoSize,
						content: buildingNames[i]
					});
				}

				let elevatorAddress = this.handleDrawText({
					ctx,
					fontSize: infoSize,
					letterSpacing: 2,
					testText: '电梯：' + this.camearInfo.elevatorName
				});

				for (let i = 0; i < elevatorAddress.length; i++) {
					potions.push({
						x: i == 0 ? 10 : uni.upx2px(90),
						y: '',
						height: infoSize,
						width: '',
						fontSize: infoSize,
						content: elevatorAddress[i]
					});
				}
			}

			let address = this.handleDrawText({
				ctx,
				fontSize: infoSize,
				letterSpacing: 2,
				testText: '定位：' + this.camearInfo.address
			});

			for (let i = 0; i < address.length; i++) {
				potions.push({
					x: i == 0 ? 10 : uni.upx2px(90),
					y: '',
					height: infoSize,
					width: '',
					fontSize: infoSize,
					content: address[i]
				});
			}

			let waterMarkH = 0;

			for (let i = 0; i < potions.length; i++) {
				waterMarkH = waterMarkH + (potions[i].type == 'line' ? 0 : potions[i].height);
			}

			let firstH = h - waterMarkH - (potions.length * 2);

			for (let i = 0; i < potions.length; i++) {
				potions[i].y = firstH;
				if (potions[i].children) {
					for (let j = 0; j < potions[i].children.length; j++) {
						potions[i].children[j].y = firstH - uni.upx2px(28) + (uni.upx2px(28) * j);
					}
				}
				firstH = firstH + potions[i].height + 2;
			}
			console.log('potions', potions, waterMarkH);
			return potions;
		},

		// 将图片与水印信息合成新图片
		drawCanvas(path) {
			const ctx = wx.createCanvasContext('save-canvas');
			let w = uni.upx2px(750);
			let h = uni.upx2px(960);
			ctx.clearRect(0, 0, w, h);
			ctx.setFillStyle('#ffffff');
			ctx.fillRect(0, 0, w, h);
			ctx.drawImage(path, 0, 0, w, h);
			ctx.drawImage('https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/e8RBYQDDWsmWd150ea3f6a6d1e0291738b8a1bdf4557.png', uni.upx2px(580), uni.upx2px(850), uni.upx2px(160), uni.upx2px(64));
			let positions = this.getWaterPositions(ctx);
			ctx.shadowOffsetX = 3;// 用来设定阴影在 X轴的延伸距
			ctx.shadowOffsetX = 3;// 用来设定阴影在 Y轴的延伸距
			ctx.shadowBlur = 2;// 设定阴影的模糊程度 默认0
			ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';// 设定阴影颜色效果 
			for (let i = 0; i < positions.length; i++) {
				if (positions[i].type != 'line') {
					ctx.setFontSize(positions[i].fontSize);
					ctx.font = `${positions[i].fontSize}px YaHei`;
					ctx.fillText(
						positions[i].content,
						positions[i].x,
						positions[i].y
					);
				} else {
					ctx.setFillStyle('#ffffff');
					ctx.fillRect(10, positions[i].y, uni.upx2px(400), 1);
				}
				if (positions[i].children) {
					for (let j = 0; j < positions[i].children.length; j++) {
						ctx.setFontSize(positions[i].children[j].fontSize);
						ctx.font = `${positions[i].children[j].fontSize}px YaHei`;
						ctx.fillText(
							positions[i].children[j].content,
							positions[i].children[j].x,
							positions[i].children[j].y
						);
					}
				}
			}
			ctx.setFontSize(uni.upx2px(20));
			ctx.fillText(
				'照片ID:' + this.imgId,
				uni.upx2px(436),
				uni.upx2px(944)
			);

			ctx.draw(true, () => {
				uni.canvasToTempFilePath({
					canvasId: 'save-canvas',
					width: w,
					height: h,
					destWidth: w * 4,
					destHeight: h * 4,
					fileType: 'jpeg',
					complete: () => {
						uni.hideLoading();
					},
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功'
								});
							},

							fail: (err) => {
								console.log(err);
							}
						});
					},
					fail: (err) => {
						console.log(err);
					}
				});
			});
		},

		savePhoto() {
			uni.showLoading({
				title: '保存中',
			});
			this.drawCanvas(this.imgPath);
		},

		getImageInfo(url) {
			return new Promise((resolve) => {
				uni.getImageInfo({
					src: url,
					success: (res) => {
						console.log(2222, res);
						resolve(res);
					},
					fail: (err) => {
						console.log(err, url);
					},
				});
			});
		},

		// 设置图片水印缓存
		setImageInfo(id, data) {
			console.log('setImageInfo', id, data);
			return new Promise((resolve) => {
				uni.setStorage({
					key: id,
					data,
					success: () => {
						resolve();
					}
				});
			});
		},

		// 确定选用  imgType 1保养记录 2保养签到 3保养签退 4维修记录 5维修签到 6维修签退 7配件记录 8配件配件签到 9配件签退
		async submit() {
			uni.showLoading({
				title: '保存中',
			});

			this.backFuc();
			setTimeout(() => {
				uni.hideLoading();
				try {
					if (this.cameraType === 1) {
						uni.$emit('uploadImg', this.imgPath, this.imgId, this.modelType && this.onlineStatus ? { result: this.modelResult ? this.modelResult.result : '', model_result: this.modelResult } : null);
					} else {
						uni.$emit('upload-video', this.videoPath);
					}
				} catch (error) {
					console.log('error', error);
				}
			}, 200);
		},

		// 点击异常项(高亮)
		chooseErrorBox(item) {
			this.highlightBox = item.key;
			if (item.reason) {
				if (Array.isArray(item.reason)) {
					this.reason = { ...item.reason[0], determine: item.determine };
				} else {
					this.reason = {
						determine: item.determine,
						businessReason:item.reason.businessReason,
						detailedReason: item.reason.detailedReason
					};
				} 
			} else {
				this.reason = {
					businessReason: '',
					detailedReason: ''
				};
			}
			console.log(item, this.reason);
		},
		changeShowPosList() {
			this.showPosList = this.showPosList ? false : true;
			this.$forceUpdate();
		},
		changeShowNonList() {
			this.showNonList = this.showNonList ? false : true;
			this.$forceUpdate();
		},
		changeShowPassList() {
			this.showPassList = this.showPassList ? false : true;
			this.$forceUpdate();
		},
		loopGetCameraInfo() {
			this.loop = true;
			this.getCameraAuthInfo();
			setTimeout(() => {
				if (!this.loaded) {
					this.loopGetCameraInfo();
				} else {
					if (!this.cameraEnable) {
						this.loopGetCameraInfo();
					} else {
						this.loop = false;
					}
				}
			}, 500);
		},

		setCameraAuth(status) {
			uni.setStorageSync('cameraAuth', status); // 0 未授权 1已授权
		},
		getCameraAuthInfo() {
			if (this.getCameraAuth() == 1) {
				this.showCamera = true;
				return;
			}
			this.tips = '正在获取授权…';
			const that = this;
			uni.getSetting({
				success: (res) => {
					console.log('getSetting', res);
					const authSetting = res.authSetting;
					if (authSetting['scope.camera']) {
						// 已经授权
						that.showCamera = true;
						this.setCameraAuth(1);
					} else {
						that.showCamera = false;
						this.setCameraAuth(0);
						this.getCameraAuth();
					}
				},
				fail: () => {
					that.showCamera = true;
					this.setCameraAuth(1);
				},
			});
		},

		getImgHead() {
			return new Promise((resolve) => {
				uni.getStorage({
					key: this.imgId,
					success: (res) => {
						console.log(111);
						let info = res.data || {};
						resolve(info);
					},
					fail: () => {
						resolve({});
					},
				});
			});
		},

		// 获取相机信息
		async getPhotoMsg() {
			let localInfo = {};
			if (this.onlineStatus) {
				localInfo = await this.getLocalInfo();
			}
			this.localInfo.latitude = localInfo.latitude;
			this.localInfo.longitude = localInfo.longitude;
			let addressText = '无法获取定位地址';
			if (this.onlineStatus) {
				try {
					let address = await getlocalinfo(this.localInfo.latitude, this.localInfo.longitude);
					if (localInfo.latitude && address.result) {
						if (address.result.formatted_addresses) {
							addressText = address.result.formatted_addresses.recommend;
						} else {
							addressText = address.result.address;
						}
					}
				} catch (error) {
					console.log('获取定位失败', error);
				}
			}
			let date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hour = date.getHours();
			const minute = date.getMinutes();
			const second = date.getSeconds();
			const week = this.dayMap[date.getDay()];
			this.imgAddress = addressText;

			if (!this.imgId) {
				const imgId = await this.setWatermarkJson({
					planId: this.imgInfo.planId,
					elevatorId: this.imgInfo.planId,
					type: this.modelType
				});
				this.imgId = imgId;
			} else {
				const imglocal = await this.getImgIdInfo(this.imgId);
				console.log('imglocal', imglocal);
			}
			let camearInfo = {
				createTime: `${year}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day} ${hour > 9 ? hour : '0' + hour}:${minute > 9 ? minute : '0' + minute}:${second > 9 ? second : '0' + second}`,
				week: week,
				time: `${hour > 9 ? hour : '0' + hour}:${minute > 9 ? minute : '0' + minute}`,
				day: `${year}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day}`,
				buildingName: this.buildingName || '',
				elevatorName: this.elevatorName || '',
				latitude: this.localInfo.latitude || '',
				longitude: this.localInfo.longitude || '',
				address: addressText || '',
				imgId: this.imgId
			};
			let watermarkInfo = {
				createTime: `${year}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day} ${hour > 9 ? hour : '0' + hour}:${minute > 9 ? minute : '0' + minute}:${second > 9 ? second : '0' + second}`,
				buildingName: this.buildingName || '',
				elevatorName: this.elevatorName || '',
				latitude: this.localInfo.latitude || '',
				longitude: this.localInfo.longitude || '',
				address: addressText || '',
			};
			this.watermarkInfo = watermarkInfo;
			this.camearInfo = camearInfo;
		},

		// 获取imgId本地缓存
		getImgIdInfo(id) {
			return new Promise((resolve) => {
				uni.getStorage({
					key: id,
					success: (res) => {
						console.log(JSON.stringify(res.data), 'getImageInfo');
						resolve(res.data);
					},
					fail: () => {
						resolve({});
					}
				});
			});
		},
		// 手动授权
		getCameraAuth() {
			const that = this;
			this.tips = '正在验证相机…';
			// 获取摄像头权限
			uni.getSetting({
				success: (res) => {
					console.log('getSetting', res);
					const authSetting = res.authSetting;
					if (authSetting['scope.camera']) {
						// 已经授权
						that.showCamera = true;
						this.setCameraAuth(1);
					} else {
						this.showCamera = false;
						this.tips = '正在获取授权…';
						// 未授权
						uni.authorize({
							scope: 'scope.camera',
							success: () => {
								// 同意授权
								that.showCamera = true;
								this.setCameraAuth(1);
							},
							fail() {
								// 引导用户授权
								uni.showModal({
									title: '授权',
									content: '需要您授权获取摄像头权限',
									success: function (res) {
										if (res.confirm) {
											uni.openSetting({
												success(resOpenSetting) {
													// resOpenSetting: {errMsg: "openSetting:ok", authSetting: {scope.camera: false}}
													console.log('resOpenSetting: ', resOpenSetting);
													const authSetting = resOpenSetting.authSetting;
													if (authSetting && authSetting['scope.camera']) {
														that.getCameraAuthInfo();
													}
												},
											});
										} else if (res.cancel) {
											this.backFuc();
										}
									},
								});
							},
						});
					}
				},
			});
		},
		// 切换相机模式
		switchMode(type) {
			if (this.isRecording) {
				uni.showToast({
					title: '请先停止录制',
					icon: 'none'
				});
				return;
			}
			this.cameraType = type;
		},

		// 切换录制状态
		toggleRecording() {
			if (this.isRecording) {
				this.stopRecording();
			} else {
				this.startRecording();
			}
		},

		// 开始录制视频
		startRecording() {
			if (this.isRecording) return;
			this.isRecording = true;
			this.recordDuration = 0;

			const ctx = uni.createCameraContext();
			this.recordContext = ctx;

			uni.showToast({
				title: '开始录制',
				icon: 'none',
				mask: true,
			});

			ctx.startRecord({
				timeout: 180,
				compressed: true,
				success: () => {
					// 开始计时
					this.recordTimer = setInterval(() => {
						this.recordDuration++;
						if (this.recordDuration >= this.maxDuration) {
							clearInterval(this.recordTimer);
							this.recordTimer = null;
							this.stopRecording(true);
						}
					}, 1000);
				},
				fail: () => {
					console.error('录制失败');
					this.isRecording = false;
					uni.showToast({
						title: '录制失败',
						icon: 'none'
					});
				}
			});
		},

		// 停止录制视频
		stopRecording(isAuto = false) {
			// 如果不是自动停止且已经超过最大时长，说明已经自动停止过了，不需要再次执行
			if (!isAuto && this.recordDuration >= this.maxDuration) {
				if (this.isRecording && this.recordContext) {
					uni.showLoading({
						title: '保存中',
						mask: true,
					});
					this.recordContext.stopRecord({
						success: (res) => {
							this.videoPath = res.tempVideoPath;
							uni.hideLoading();
							uni.showToast({
								title: isAuto ? '已达到最大录制时长' : '录制完成',
								icon: 'success'
							});
							console.log('videoPath', this.videoPath);
							this.recordContext = null;
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showToast({
								title: '录制失败',
								icon: 'none'
							});
							console.error('停止录制失败:', err);
							this.isRecording = false;
							this.recordContext = null;
						}
					});
				}
				this.isRecording = false;
				return;
			}

			if (!this.isRecording) return;

			clearInterval(this.recordTimer);
			this.recordTimer = null;

			if (this.recordContext) {
				uni.showLoading({
					title: '保存中',
					mask: true,
				});
				this.recordContext.stopRecord({
					success: (res) => {
						this.isRecording = false;
						this.videoPath = res.tempVideoPath;
						uni.hideLoading();
						uni.showToast({
							title: isAuto ? '已达到最大录制时长' : '录制完成',
							icon: 'success'
						});
						this.recordContext = null;
						console.log('videoPath', this.videoPath);
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '录制失败',
							icon: 'none'
						});
						console.error('停止录制失败:', err);
						this.isRecording = false;
						this.recordContext = null;
					}
				});
			}
		},

		// 保存媒体文件
		saveMedia() {
			if (this.cameraType === 1) {
				this.savePhoto();
			} else {
				this.saveVideo();
			}
		},

		// 保存视频
		saveVideo() {
			uni.showLoading({
				title: '保存中'
			});
			uni.saveVideoToPhotosAlbum({
				filePath: this.videoPath,
				success: () => {
					uni.showToast({
						title: '保存成功'
					});
				},
				fail: () => {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},

		// 初始化相机上下文
		initCameraContext() {
			this.cameraContext = uni.createCameraContext();
		},

		// 处理缩放滑动中
		onZoomChanging(e) {
			const value = e.detail.value;
			this.zoomLevel = value;
			if (this.cameraContext) {
				// 使用节流优化性能
				if (!this.zoomTimer) {
					this.cameraContext.setZoom({
						zoom: this.zoomLevel
					});
					this.zoomTimer = true;
					setTimeout(() => {
						this.zoomTimer = false;
					}, 100);
				}
			}
		},

		// 处理缩放滑动结束
		onZoomChange(e) {
			const value = e.detail.value;
			this.zoomLevel = value;
			if (this.cameraContext) {
				this.cameraContext.setZoom({
					zoom: this.zoomLevel
				});
			}
		},
	},
};
</script>
<style lang="scss">
page {
	// 
	width: 100%;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.camera-view {
	background-color: #000;
	width: 100%;
	height: 100%;
}

.camera-block {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	// justify-content: space-between;
	position: relative;
	height: 960rpx;
	justify-content: flex-end
}

.reason-tips {
	width: 750rpx;
	position: fixed;
	left: 0;
	top: 210rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;

	&-tag {
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 10rpx;
	}
}

.ai-result {
	position: fixed;
	top: 210rpx;
	left: 20rpx;
	display: flex;
	align-items: center;
	border-radius: 8rpx;
	color: #fff;
	font-size: 28rpx;
	padding: 2rpx 12rpx 6rpx 12rpx;
	vertical-align: unset;
	font-weight: normal;
	z-index: 3;

	&-ico {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}

	.appeal {
		background-color: #fff;
		border-radius: 2rem;
		padding: 0 10rpx;
		margin-left: 4rpx;
		color: #E02020;
		margin-top: 4rpx;
		font-size: 24rpx;
		padding-bottom: 2rpx;
	}
}

.gre {
	background-color: #68CA00;
}

.org {
	background-color: #FF7505;
}

.red {
	background-color: #E02020;
}

.overlay {
	width: 750rpx;
	height: 960rpx;
	position: absolute;
	pointer-events: none;
	left: -22rpx;
	top: 0;
	z-index: 99;

	.box {
		border: 1px solid red;
		position: absolute;
	}
}

.camera {
	width: 100%;
	height: 960rpx;
}

.img-msg {
	z-index: 90;
	width: calc(100% - 44rpx);
	color: #fff;
	position: absolute;
	left: 20rpx;
	padding-bottom: 20rpx;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 940rpx;

	.reasons {
		width: 94%;
		// padding-left: 20rpx;

		&-tab {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			width: fit-content;
			padding: 4px;
			border-radius: 4px;
			color: #fff;
			background: rgba(224, 32, 32, 0.7);
			margin-bottom: 8rpx;

			.ico {
				width: 26rpx;
				height: 26rpx;
				margin-right: 4rpx;
				transition: .3s all;
			}
		}

		&-list {
			width: 100%;
			display: flex;
			flex-direction: column;

			.reasons-item {
				display: block;
				padding: 4px;
				font-size: 24rpx;
				border-radius: 4px;
				width: fit-content;
				color: #fff;
				margin-bottom: 8rpx;
				background: rgba(0, 0, 0, 0.4);

				&-tag {
					background: rgba(224, 32, 32, 1);
					margin-right: 4rpx;
					padding: 0 4rpx;
					border-radius: 3px;
				}

			}
		}

		.pos-tab {
			background: rgba(255, 117, 5, 0.7);
		}

		.pos-tag {
			background: rgba(255, 117, 5, 1);
		}

		.pas-tab {
			background: rgba(104, 202, 0, 0.7);
		}

		.pas-tag {
			background: #68CA00;
		}

	}

	.pas-act {
		background: #fff !important;
		color: #68CA00 !important;

		.reasons-item-tag {
			color: #fff !important;
		}
	}

	.pos-act {
		background: #fff !important;
		color: rgba(255, 117, 5, 1) !important;

		.reasons-item-tag {
			color: #fff !important;

		}
	}

	.notpas-act {
		background: #fff !important;
		color: rgba(224, 32, 32, 1) !important;

		.reasons-item-tag {
			color: #fff !important;
		}
	}

	&-item {
		color: #fff;
		font-size: 24rpx;
		width: 55%;
		// padding-left: 20rpx;
		display: flex;
		align-items: baseline;
		text-shadow: 0.1em 0.1em 0.2em black;
		pointer-events: none;

		.imi-label {
			margin-right: 10rpx;
		}

		.imi-content {
			flex: 1;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
		}
	}

	.aligncenter {
		align-items: center !important;
	}

	.times {
		font-weight: bold;
		font-size: 60rpx;
		margin-right: 10rpx
	}

	.dates {
		font-size: 22rpx;
	}

	&-line {
		background-color: #fff;
		width: 60%;
		height: 2rpx;
		margin: 10rpx 0;
		box-shadow: 0.1em 0.1em 0.2em black;
	}

	.watermark {
		padding-bottom: 10rpx;
	}

	.watermark-logo {
		width: 160rpx;
		height: auto;
		position: absolute;
		bottom: 51rpx;
		right: 10rpx;
	}

	.watermark-id {
		height: auto;
		position: absolute;
		text-align: right;
		font-size: 20rpx;
		bottom: 21rpx;
		right: 10rpx;
		color: #fff;
		text-shadow: 0.1em 0.1em 0.2em black;
	}

}

.preview {
	width: 100%;
	height: 960rpx;
	top: 0;
	left: 0;
	background-color: hsla(206, 100%, 50%, 0);
}

@-webkit-keyframes changeright {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.defalut-view {
	width: 100%;
	height: 1000rpx;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	// background-color: #fff;
	flex-direction: column;
	font-size: 24rpx;
	text-align: center;
	color: #fff;

	&-btn {
		border: 1rpx solid #0091ff;
		padding: 20rpx 50rpx;
		border-radius: 8rpx;
		text-align: center;
		color: #fff;
		background-color: #0091ff;
	}

	.img {
		animation: changeright 1.4s linear infinite;
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}
}

.buttons {
	position: fixed;
	bottom: 72rpx;
	z-index: 99;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 98rpx;
	width: calc(100% - 98rpx - 98rpx);

	.c_model {
		width: 80rpx;
		height: 80rpx;
	}

	.record-timer {
		position: absolute;
		top: -146rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.take {
		width: 132rpx;
		height: 132rpx;
		background: #ffffff;
		border-radius: 50%;
		border: 22rpx solid #b5b1b0;
		transition: all 0.3s;
		position: relative;

		&.photo {
			background: #ffffff;
		}

		&.video {
			background: #ff4444;

			&::before {
				content: '';
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 8rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			&.recording {
				&::before {
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
				}

				animation: pulse 1.5s infinite;
			}
		}
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.mycanvas {
	position: fixed;
	z-index: -11;
	top: -2000px;
	left: -2000px;
}

.save-canvas {
	position: fixed;
	z-index: -11;
	top: -2000rpx;
	left: -2000rpx;
	width: 750rpx;
	height: 960rpx;
}

.preview-btns {
	position: fixed;
	bottom: 100rpx;
	z-index: 99;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 64rpx;
	width: calc(100% - 64rpx - 64rpx);

	&-item {
		width: 288rpx;
		height: 70rpx;
		background: #f5fbff;
		border-radius: 8rpx;
		font-weight: bold;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0091ff;
		background-color: #fff;
	}

	&-item:last-child {
		background-color: #0091ff;
		color: #fff;

	}
}

.waterMark {
	left: 20rpx;
	position: fixed;
	bottom: 300rpx;
}

.linestyle {
	width: 100%;
	height: 2rpx;
	background-color: #fff;
}

.model-close {
	text-align: center;
	padding: 30rpx 0;
	color: #0091ff;
}

.model-txt {
	text-align: center;

}

.mode-switch {
	position: absolute;
	top: -100rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 40rpx;
	padding: 4rpx;

	.mode-btn {
		padding: 4rpx 30rpx;
		color: #fff;
		font-size: 28rpx;
		border-radius: 36rpx;

		&.active {
			background: #fff;
			color: #000;
		}
	}
}

.zoom-control {
	position: absolute;
	left: 50%;
	top: 10rpx;
	transform: translateX(-50%);

	z-index: 99;
	background: rgba(0, 0, 0, 0.3);
	padding: 0rpx 20rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;

	.zoom-slider {
		width: 220rpx;
		margin: 0;
	}

	.zoom-txt {
		white-space: nowrap;
		margin-left: 13rpx;
		font-size: 20rpx;
		text-align: center;
		color: #fff;
	}

}
</style>
